<template>
<!-- self表示只有点击自己才有效 -->
<transition name="dialog-fade">
    <div class="diaing_wrapper" v-show="disabled"  @click.self="headCloce">
        <div class="diaing" :style="{width:width, marginTop:top}">
            <div class="diaing_head">
                <span class="diaing_title">{{title}}</span>
                <span class="diaing_exit" @click="headCloce">×</span>
            </div>
            <div class="diaing_main">
                <span><slot></slot></span>
            </div>
            <div class="diaing_footer" v-if="$slots.footer">
               <slot name="footer"></slot>
            </div>
        </div>
    </div>
</transition>
</template>
<script>
export default {
    props:{
        title:{
            type:String,
            default:'提示'
        },
        width:{
            type:String,
            default:'40%'
        },
        top:{
            type:String,
            default:'15vh'
        },
        disabled:{
            type:Boolean,
            default:false,
        }
    },
    methods:{
         headCloce(){
        this.$emit('cloce',false)
    }
    }
   
}
</script>
// scoped会给当前所有组件模板中加一个随机属性
// scoped会给当前所有组件样式添加一个对应的随机属性
<style scoped>
    *{
        padding:0;
        margin:0;
        box-sizing:border-box;
    }
    .diaing_wrapper{
        height:100vh;
        background: rgba(0,0,0,0.5);
        display: flex;
        justify-content: center;
       
    }
    .diaing{
        width:480px;
        height:203px;
        background: white;
        margin-top:112px;
    }
    .diaing_head{
        padding:20px;
        display:flex;
        justify-content: space-between;
    }
    .diaing_title{
        font-size: 18px;
        color: #303133;
    }
    .diaing_exit{
        font-size: 22px;
        color:#979AA0;
        margin-top: -10px;
    }
    .diaing_main{
        display:flex;
        align-items: center;
        padding:30px 0px 0px 20px;
        color:#606266;
    }
    .diaing_footer{
        display: flex;
        justify-content: flex-end;
        margin-top:30px
    }
    /* 进入动画  */
    .dialog-fade-enter-active{
        animation: fade .3s;
    }
    /* 离开动画 */
    .dialog-fade-leave-active{
        animation: fade .3s reverse;
    }
    @keyframes fade{
        0%{
            opacity: 0;
            transform: translateY(-20px);
        }
        100%{
            opacity: 1;
             transform: translateY(0px);
        }
    }
</style>